<template>

    <!-- 页面布局 -->
    <el-container class="home_container">
        <el-header>
            <div>
                <img src="../assets/shen_logo.png" alt="">
                <span>购物管理系统</span>
            </div>
            <el-button type="info" @click="logout">退出登录</el-button></el-header>
        <el-container >
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <div class="menu_collapse" @click="menuCollapse">|||</div>
                <el-menu 
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b" 
                    class="menu"
                    unique-opened
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    router
                    :default-active="activePath"
                >
                    <el-submenu 
                    v-for="item in menuList"
                    :key="item.id+''"
                    :index="item.id+''">
                        <template slot="title">
                            <i :class="iconList[item.id]"></i>
                            <span>{{item.authName}}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item
                        v-for="childItem in item.children" 
                        :key="childItem.id+''"
                        :index="'/'+childItem.path"
                        @click="saveNavState('/'+childItem.path)"
                        >
                            <template>
                                <i class="el-icon-menu"> </i>
                                <span>{{childItem.authName}}</span>
                            </template>
                            
  
                        </el-menu-item>
                    
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <!-- 路由占位符--Welcome -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

</template> 

<script>
export default {
    // 存储数据
    data(){
        return {
            // 一级菜单
            menuList:[],
            iconList:{
                "125":"iconfont icon-yonghuming",
                "103":"iconfont icon-kongjian",
                "101":"iconfont icon-gouwudai",
                "102":"iconfont icon-danju",
                "145":"iconfont icon-baobiaofenxi"
            },
            // 是否折叠
            isCollapse:false,
            // 被激活的状态链接
            activePath:""
          

        }
    },
    // 生命周期函数
    created(){
        this.getMenuList()
        this.activePath = window.sessionStorage.getItem("activePath")//获取sessionStorage中的键值对
        
    },
    methods:{
        // 退出事件
        logout(){
            // 将token清空 后续请求就不会携带token，必须重新登录生成一个新的token之后才能进行页面访问
            window.sessionStorage.clear();
            // 跳转到登录页面
            this.$router.push("/login");
        },
        // 获取菜单列表数据
        async getMenuList(){
            const { data : res } =  await this.$http.get("menus")
            if(res.meta.status !== 200){
                return this.$message.error(res.meta.msg)
            }
            this.menuList = res.data
            // console.log(this.menuList);
            
            
        },
        // 点击按钮，进行导航栏折叠
        menuCollapse(){
            this.isCollapse = !this.isCollapse
        },
        // 保存链接的激活状态
        saveNavState(activePath){
            // 将链接地址的激活状态保存在sessionStorage中
            window.sessionStorage.setItem("activePath",activePath)
            // 将状态保存到data数据中
            this.activePath = activePath

        }
    }
}
</script>

<style lang="less" scoped>
    // 页面布局
    .home_container{    
        height: 100%;
    }
    .el-header{
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        align-items: center;
        background-color: #287fc4;
        color: #fff;
        font-size: 30px;
        > div{
            display: flex;
            align-items: center;
            span{
                margin-left: 20px;
            }
        }
    
    }

    .el-aside {
        background-color: #545c64;
        .menu_collapse{
            background-color: #4a5064;
            font-size: 20px;
            line-height: 56px;
            height: 56px;
            color: #6f6f6f;
            text-align: center;
            cursor: pointer;
            letter-spacing: 0.2em;//字间距
            user-select: none; //禁止用户选择文本
        }
   
    }
  
    .el-main {
        background-color: #E9EEF3;

    }

    .menu{
        border-right:none ;
        user-select: none; //禁止用户选择文本
        font-size: 25px;
        i{
            font-size: 25px;
            margin-right: 5px;
        }
        
    }
    .el-menu-item{
        i{
            font-size: 20px;
            margin-right: 5px;
        }
    }
    
</style>



